import React, {Component} from "react";
import {Icon, Layout, Tooltip} from "antd";
import "./style/index.less";
import {receiveData} from "./action";
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
const { Header, Content, Footer } = Layout;

class App extends Component {
    state = {
        collapsed: false,
        userID: '',
        realName: ''
    };
    componentWillMount() {
        const { receiveData } = this.props;
        const user = JSON.parse(localStorage.getItem('user'));
        if (user) {
            let {user: userInfo} = user;
            userInfo && this.setState({userID: userInfo.id, realName: userInfo.realName});
            receiveData(user, 'auth');
        }
        // receiveData({a: 213}, 'auth');
        // fetchData({funcName: 'admin', stateName: 'auth'});
        this.getClientWidth();
        window.onresize = () => {
            // console.log('屏幕变化了');
            this.getClientWidth();
            // console.log(document.body.clientWidth);
        }
    }
    getClientWidth = () => {    // 获取当前浏览器宽度并设置responsive管理响应式
        const { receiveData } = this.props;
        const clientWidth = document.body.clientWidth;
        // console.log(clientWidth);
        receiveData({isMobile: clientWidth <= 992}, 'responsive');
    };
    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    handleLogout = () => {
        const {router} = this.props;
        localStorage.removeItem('user');
        router.push('/');
    };

    render() {
        // console.log(this.props.auth);
        // console.log(this.props.responsive);
        const { auth, router, responsive } = this.props;
        return (
            <Layout className="">
              <Layout>
                <Header >
                    <div className="cashier-header" >
                        <span className="info-text">
                            收银员姓名: {this.state.realName}
                        </span>
                        <span className="logout-btn" onClick={this.handleLogout}>
                            <Tooltip placement="top" title="退出登录">
                                <Icon type="logout" />
                            </Tooltip>
                        </span>
                    </div>
                </Header>
                <Content style={{ margin: '0 16px', overflow: 'initial' }}>
                  {this.props.children}
                </Content>
                <Footer style={{ textAlign: 'center' }}>
                  
                </Footer>
              </Layout>
                {
                    responsive.data.isMobile && (   // 手机端对滚动很慢的处理
                        <style>
                        {`
                            #root{
                                height: auto;
                            }
                        `}
                        </style>
                    )
                }
            </Layout>
        );
    }
}

const mapStateToProps = state => {
    const { auth = {data: {}}, responsive = {data: {}} } = state.httpData;
    return {auth, responsive};
};
const mapDispatchToProps = dispatch => ({
    receiveData: bindActionCreators(receiveData, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(App);
